<template>
	<view>
		<view class="head">
			<view class="list">
				<view class="listitem">
					<view>姓名</view>
					<view><input type="text" value="" placeholder="请输入姓名" style="line-height: 100rpx;height: 100rpx;"/></view>
				</view>
				<view class="listitem">
					<view>手机号</view>
					<view><input type="text" value="" placeholder="请输入手机号码" style="line-height: 100rpx;height: 100rpx;"/></view>
				</view>
				<view class="listitem" @click="show = true">
					<view>证件类型</view>
					<view>
					<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
					<view>{{txt}}</view>
					</view>
				</view>
				<view class="listitem">
					<view>证件号</view>
					<view><input type="text" value="" placeholder="请输入证件号码" style="line-height: 100rpx;height: 100rpx;"/></view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view style="margin: 20rpx 0rpx 0rpx 20rpx;">上传身份证照片</view>
			<view>
				<view style="background-color: #FFFFFF;">
					<u-upload :action="action" max-count="1" width="730rpx" height="350rpx"  
					upload-text='上传正面照'
					 on-remove='yc(index, lists, name)' 
					 on-success='cg(data, index, lists, name)'
					 on-change='sc(res, index, lists, name)'
					 on-error='sb(res, index, lists, name)'>
					 </u-upload>
					 </view>
				<view style="background-color: #FFFFFF;">
					<u-upload :action="action" max-count="1" width="730rpx" height="350rpx"  
					upload-text='上传反面照'
					on-remove='yc1(index, lists, name)'
					on-success='cg1(data, index, lists, name)'
					on-change='sc1(res, index, lists, name)'
					on-error='sb1(res, index, lists, name)'>
					 </u-upload>
					 </view>
				
			</view>
		</view>
		<view style="margin: 20rpx 0rpx 40rpx 40rpx; width: 90%; display: flex;">
			<view>
				<radio-group @change="radioChange" class="radio-group-wrap">
								<!-- :checked= = true 默认为选中  -->
								 <!-- :checked="false" 默认为不选中 -->
								 <!-- 但是都不影响 点击之后 变为 打钩 -->
								<radio style="transform:scale(0.8);" value="agreementSelected" :checked="agreementChecked" @click="radioClick"></radio>
							</radio-group>
			</view>
			<view>已阅读并同意</view>
			<view>《xxx用户服务协议》</view>
		</view>
		<view style="margin-bottom: 20rpx;"><button @click="btn()" style="background-color: #2B8FFF; opacity: 0.3; width: 400rpx;margin: 0 auto; color: #FFFFFF;">认证信息</button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'1',
				agreementChecked:false,
				show: false,
				list: [
					{
						value: '1',
						label: '身份证'
					},
					{
						value: '2',
						label: '军人证'
					},
					{
						value: '3',
						label: '护照'
					},
					{
						value: '4',
						label: '内地通行证'
					},
				],
				txt:'身份证',
				action:''
			}
		},
		methods: {
			//图片上传成功时触发
			cg(data, index, lists, name){
				
			},
			cg1(data, index, lists, name){
				
			},
			//图片上传失败
			sb(res, index, lists, name){
				
			},
			sb1(res, index, lists, name){
				
			},
			//移除图片
			yc(index, lists, name){
				
			},
			yc1(index, lists, name){
				
			},
			//上传后
			sc(res, index, lists, name){
				
			},
			sc1(res, index, lists, name){
				
			},
			btn(){
				uni.navigateTo({
					url:'succeed'
				})
			},
			confirm(e) {
				this.txt = e[0].label
				console.log(this.txt)
			},
			radioChange(e) {
					console.log(e.detail);
						//  错误写法：
						// this.agreementChecked != this.agreementChecked;
						//取反：
						// this.agreementChecked = false
						
					},
					radioClick(){
						console.log('~~~点击radio~~')
						
						this.agreementChecked = !this.agreementChecked;
					}
		}
	}
</script>

<style>
page {
		background-color: #f5f5f5;
	}
	.list{
		width: 100%;
		background-color: #FFFFFF;
	}
	.listitem{
		width: 90%;
		margin: 0 auto;
		display: flex;
		border-bottom: 4rpx solid #f5f5f5;
		height: 100rpx;
		line-height: 100rpx;
	}
	.listitem>view:first-child{
		width: 140rpx;
	}
</style>
